<template>
  <div class="app-container">
    <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
      <el-tab-pane name="dbx">
        <span slot="label">
          <i class="el-icon-s-order"></i>&nbsp;待办箱
        </span>
        <div v-if="tabActiveName == 'dbx'">
          <div class="filter-container">
            <el-form :inline="true" label-position="right" label-width="90px">
              <el-form-item label="项目名称">
                <el-input v-model="listQuery.projectName" placeholder="项目名称" />
              </el-form-item>
              <el-form-item label="业务编号">
                <el-input v-model="listQuery.number" placeholder="业务编号" />
              </el-form-item>
              <el-form-item label="当前流程">
                <el-select @change="changePage(1)" placeholder="当前流程" v-model="listQuery.feasiblePlanProcess">
                  <el-option v-for="(item, index) in processData" :key="index" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="changePage(1)" type="primary">查询</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table v-loading="listLoading" :data="list" element-loading-text="加载中" highlight-current-row>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="number" label="业务编号"></el-table-column>
            <el-table-column label="项目类型">
              <template slot-scope="scope">{{ scope.row.projectType.name }}</template>
            </el-table-column>
            <el-table-column label="项目级别">
              <template slot-scope="scope">{{ scope.row.levelDto.name }}</template>
            </el-table-column>
            <el-table-column prop="name" label="项目名称"></el-table-column>
            <el-table-column label="当前流程">
              <template slot-scope="scope">{{ scope.row.handlingDto.processName }}</template>
            </el-table-column>
            <el-table-column label="上一流程提交时间">
              <template slot-scope="scope">{{ scope.row.handlingDto.lastSubmitTime }}</template>
            </el-table-column>
            <el-table-column label="提交人">
              <template slot-scope="scope">{{ scope.row.handlingDto.submitter }}</template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <router-link v-if="scope.row.handlingDto.processValue == 'PROJECT_DISTRIBUTE'" :to="{ name:'项目铺排' }">
                  <el-button size="mini" type="primary">办理</el-button>
                </router-link>
                <a v-else target="_blank" :href="`${baseUrl}#/login?projectId=${scope.row.id}&token=${token}&process=${scope.row.handlingDto.processValue}&name=${scope.row.name}&userId=${userInfo.userId}&menus=${userInfo.role.extend}`">
                  <el-button size="mini" type="primary">办理</el-button>
                </a>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination @current-change="changePage" :page-size="listQuery.size" layout="prev, pager, next, jumper" :total="total"></el-pagination>
          </div>
					
        </div>
      </el-tab-pane>
      <el-tab-pane name="ybx">
        <span slot="label">
          <i class="el-icon-s-claim"></i>&nbsp;已办箱
        </span>
        <div v-if="tabActiveName == 'ybx'">
          <div class="filter-container">
            <el-form :inline="true" label-position="right" label-width="90px">
              <el-form-item label="项目名称">
                <el-input v-model="listQuery.projectName" placeholder="项目名称" />
              </el-form-item>
              <el-form-item label="业务编号">
                <el-input v-model="listQuery.number" placeholder="业务编号" />
              </el-form-item>
              <el-form-item label="当前流程">
                <el-select @change="changePage(1)" placeholder="当前流程" v-model="listQuery.feasiblePlanProcess">
                  <el-option v-for="(item, index) in processData" :key="index" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="changePage(1)" type="primary">查询</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table v-loading="listLoading" :data="list" element-loading-text="加载中" highlight-current-row>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="number" label="业务编号"></el-table-column>
            <el-table-column label="项目类型">
              <template slot-scope="scope">{{ scope.row.projectType.name }}</template>
            </el-table-column>
            <el-table-column label="项目级别">
              <template slot-scope="scope">{{ scope.row.levelDto.name }}</template>
            </el-table-column>
            <el-table-column prop="name" label="项目名称"></el-table-column>
            <el-table-column label="当前流程">
              <template slot-scope="scope">{{ scope.row.handlingDto.processName }}</template>
            </el-table-column>
            <el-table-column label="已办流程">
              <template slot-scope="scope">
                <el-button style="margin-right: 10px;" size="mini" type="primary" @click="handleShowProcess(scope.row.handlingDto.finishedProcess)">查看流程</el-button>
                <router-link v-if="scope.row.handlingDto.processValue == 'PROJECT_DISTRIBUTE'" :to="{ name:'项目铺排' }">
                  <el-button size="mini" type="primary">查看</el-button>
                </router-link>
                <a v-else target="_blank" :href="`${baseUrl}#/login?projectId=${scope.row.id}&token=${token}&process=${scope.row.handlingDto.processValue}&name=${scope.row.name}&userId=${userInfo.userId}&menus=${userInfo.role.extend}`">
                  <el-button size="mini" type="primary">查看</el-button>
                </a>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination @current-change="changePage" :page-size="listQuery.size" layout="prev, pager, next, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :close-on-click-modal="false" width="30%" title="已办流程" :visible.sync="dialog">
      <el-timeline :reverse="false">
        <el-timeline-item :timestamp="item.endTime" size="large" color="#0bbd87" icon="el-icon-check" v-for="(item, index) in finishedProcess" :key="index">{{item.processName}}</el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
import { getWaitList, getAlreadyList, getProcessData } from "@/api/project/xmkgh/ywdeal";
import { getToken } from "@/utils/auth";
import config from "@/config";

export default {
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        projectName: null,
        number: null,
        feasiblePlanProcess: null
      },
      tabActiveName: "dbx",
      processData: [],
      baseUrl: config.baseUrl,
      userInfo: "", //用户信息
      finishedProcess: [],
      dialog: false,
			token:"",
			
    };
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      let fun = null;
      if (this.tabActiveName == "dbx") {
        fun = getWaitList;
      }
      if (this.tabActiveName == "ybx") {
        fun = getAlreadyList;
      }
      fun(this.listQuery)
        .then(res => {
          this.listLoading = false;
          this.list = res.data.rows;
          this.total = res.data.total;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    changePage(page) {
      this.listQuery.page = page;
      this.fetchData();
    },
    getProcessData(callback) {
      getProcessData().then(res => {
        this.processData = res.data;
        this.listQuery["feasiblePlanProcess"] = this.processData[0].code;
        callback();
      });
    },
    handleTabClick(tab, event) {
      if (this.tabActiveName != "tzx") {
        this.clearListQuery();
        this.changePage(1);
      }
    },
    clearListQuery() {
      this.listQuery["projectName"] = null;
      this.listQuery["number"] = null;
      this.listQuery["feasiblePlanProcess"] = this.processData[0].code;
    },
    handleShowProcess(arr) {
      this.finishedProcess = arr;
      this.dialog = true;
    }
  },
  created() {
    this.userInfo = this.$store.state.user.userInfo;
    // this.role = this.$store.state.user.userInfo.userId;
    const that = this;
    this.token = getToken();
    this.getProcessData(function() {
      that.fetchData();
    });
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__item {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
  color: #999;
}
</style>